<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米SU7卡片布局</title>
		<style>
			/**
			 * css样式思路
			 * 1.通配选择器：微软雅黑，#f5f5f5 浅灰，外边距至0
			 * 2.#product-card;边框、内边距、外边距，阴影【透明.1】、文字居中
			 * 3.img：边框倒角、内外边距？【微调】
			 * 4.h3 颜色 【渐灰】
			 * 5.p.字体大小、颜色
			 * 6.p+span:是否需要内外边距【微调，上色】
			 */
			#product_card{
				width: 270px;
				height: 480px;
				background: #f5f5f5;
				margin-top: 2px;
				font-family: "微软黑体";
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			}
			img{
				margin-top: 10px;
				margin-left: 10px;
				border-radius:2%;
				
			}
			h3{
				margin-top: 15px;
				text-align: center;
				font-size: 10px;
				color: #2b2b2b;
			}
			p#p1{
				margin-top: 15px;
				text-align: center;
				color: #ff0000;
			}
			p#p2{
				text-align: center;
				font-size: 5px;
				color: #4c4c4c ;
			}
			span{
				color: #ff0000;
				text-align: center;
				margin:0 auto;
				font-size: 5px;
				}
			
		</style>
	</head>
	<body>
		<!-- 网页 1.html 结构 【原生图分析】 -->
		<div id="product_card">
			<img src="img/小米7.jpg" width="250px" height="350px" alt="SU7">
			<h3>小米SU7</h3>
			<p id="p1">￥279999.00</p>
			<p id="p2">已有<span> 10w+ </span>人评价:</p>
		</div>
	</body>
</html>